<template>
    <div class="bg-white rounded-8px mb-20px">
        <div class="p-30px flex justify-between text-24px font-600">
            <div class="flex">
                <el-input
    v-model="keyword"
    style="width: 500px; margin-right:20px"
    type="text"
    placeholder="请输入关键词"
  />
  <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
            </div>
            <div class="flex">
                <el-button type="success" :icon="Edit" @click="goReply()">发表讨论</el-button>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-8px mb-20px">
        <div class="p-30px text-24px">
            <block v-for="(item,index) in communityList">
                <div class="flex justify-between items-center p-20px rounded-10px text-16px text-dark-400 listItem" @click="goClassmateDetail(item.com_id)">
                    <div>{{ item.com_title }}</div>
                    <div><el-icon><ArrowRight /></el-icon></div>
                </div>
                
            </block>

            <div class="text-center mt-30px"><el-pagination class="justify-center" @current-change="handleCurrentChange" :hide-on-single-page="true" background layout="prev, pager, next" :total="total" /></div>
        </div>
        
    </div>
    <el-dialog
        v-model="dialogVisible"
        title="添加回复"
        width="600"
        :before-close="handleClose"
    >   
        <div class="px-20px">
            <div class="mb-5px">标题：</div>
            <div><el-input
                    v-model="postData.com_title"
                    type="text"
                    placeholder="请输入标题"
                />
            </div>
        </div>
        <div class="px-20px mt-30px">
            <div class="mb-5px">类型：</div>
            <div><el-radio-group v-model="type">
                    <el-radio :value="0">提问求助</el-radio>
                    <el-radio :value="1">讨论交流</el-radio>
                </el-radio-group>
            </div>
        </div>
        <div class="px-20px mt-30px">
            <div class="mb-5px">内容：</div>
            <div><el-input
                    v-model="postData.com_content"
                    
                    :rows="3"
                    type="textarea"
                    placeholder="请输入内容"
                />
            </div>
        </div>
        <div class="px-20px mt-30px">
            <div class="mb-5px">图片：</div>
            <div><el-upload
                    class="avatar-uploader"
                    :action="uploadUrl"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    :headers="configHeaders"
                >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <div v-else class="w-150px h-150px text-center leading-150px border border-dashed border-gray-300 rounded-8px">
                        <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
                    </div>
                    
                </el-upload>
            </div>
        </div>
        <div class="px-20px mt-30px mb-20px text-center">
            <el-button class="w-530px" type="primary" @click="submit">提交</el-button>
        </div>
    </el-dialog>
</template>
<script setup>
    import { Edit,Search } from '@element-plus/icons-vue'
    import { ref,onMounted,computed,watch, nextTick } from 'vue'
    import { useRoute,useRouter } from 'vue-router'
    import { useUserStore } from '../../stores/user'
    import { systemApi,userApi,httpApi } from '../../api/api'
    import { configStore } from '../../stores/config'
    import { Minus, Plus } from '@element-plus/icons-vue';
    import DOMPurify from 'dompurify';
    import { ElMessage } from 'element-plus';

    const config = configStore()
    const userStore = useUserStore()
    const totalPages=ref(0)
    const total = ref(0)
    const complete=ref(0)
    const currentPage = ref(1)
    const communityList = ref([])
    const keyword = ref('')
    const router = useRouter()
    const dialogVisible = ref(false)
    const configHeaders = ref({})
    const uploadUrl = ref('')
    const imageUrl = ref('')
    const postData = ref({})
    const type = ref(1)


    
    const init = async ()=>{
        let configData = config.getConfig()
        let token = userStore.getToken()
        uploadUrl.value = configData.upload.uploadurl
        
        configHeaders.value = {
            'token':token
        }
        let params = {page:currentPage.value}
        if(keyword.value){
            params.keyword = keyword.value
        }
        let res = await httpApi.getCommunityList(params)
        if(res.code){
            communityList.value = res.data.list
            total.value = res.data.total
           
        }
    }
    const goClassmateDetail = (id)=>{
        console.log(id)
        router.push({name:'ClassmateDetail',query:{com_id:id}})
    }

    const handleCurrentChange = (value)=>{
        currentPage.value = value
        init()
    }

    const handleSearch = ()=>{
        init()
    }

    const handleAvatarSuccess = (response, uploadFile) => {
        //console.log(uploadFile.response.data.url);
        imageUrl.value = uploadFile.response.data.fullurl;
        postData.value.com_img = uploadFile.response.data.url
    }

    const submit = async ()=>{
        postData.value.com_type = type.value
        let res = await httpApi.addContent(postData.value)
        if(res.code){
            ElMessage.success(res.msg)
            dialogVisible.value = false
            init()
        }
    }

    const goReply = ()=>{
        dialogVisible.value = true
    }


    onMounted(()=>{
        init()
    })

</script>
<style scoped>
    .listItem:hover{
        background-color:rgba(254, 226, 226, 1);
        cursor: pointer;
    }
</style>